<section style="margin-left: 40px">
  <form dForm [layout]="layoutDirection">
    <div class="grid">
      <div class="u-1-3">
        <d-form-item>
          <d-form-label [required]="true" [hasHelp]="true" [customHelpTipTemplate]="customTmp">Name</d-form-label>
          <ng-template #customTmp>
            <div style="padding-left: 20px">
              <b>自定义提示内容模板</b>
              <br />
              <span>custom name</span>
            </div>
          </ng-template>
          <d-form-control class="form-control-width">
            <input dTextInput name="userName" />
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
          <d-form-control class="form-control-width">
            <input dTextInput name="userName" />
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
          <d-form-control class="form-control-width">
            <input dTextInput name="userName" />
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
          <d-form-control class="form-control-width">
            <input dTextInput name="userName" />
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
          <d-form-control class="form-control-width">
            <input dTextInput name="userName" />
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'This is the plan name.'">Name</d-form-label>
          <d-form-control class="form-control-width">
            <input dTextInput name="userName" />
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label [required]="true">Select</d-form-label>
          <d-form-control class="form-control-width">
            <d-select [options]="selectOptions" name="select1" [filterKey]="'label'" [(ngModel)]="formData.selectValue"></d-select>
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label>Multiple options</d-form-label>
          <d-form-control class="form-control-width">
            <d-select
              name="multiSelect"
              [options]="selectOptions"
              [filterKey]="'label'"
              [isSearch]="true"
              [multiple]="true"
              [extraConfig]="{
                labelization: multipleSelect2DemoConfig.labelization
              }"
              [ngModel]="formData.multipleSelectValue"
            ></d-select>
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label>Tags</d-form-label>
          <d-form-control class="form-control-width">
            <d-tags-input
              name="tag"
              (click)="$event.stopPropagation()"
              [displayProperty]="'label'"
              [tags]="addedLabelList"
              [placeholder]="'Tags'"
              [suggestionList]="labelList"
            >
            </d-tags-input>
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label>Execution day</d-form-label>
          <d-form-control class="form-control-width">
            <div class="single-checkbox" *ngFor="let option of checkboxOptions">
              <d-checkbox name="runDay" [label]="option.label" [isShowTitle]="false" [ngModel]="option.checked"></d-checkbox>
            </div>
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label>Radio</d-form-label>
          <d-form-control class="form-control-width">
            <d-radio-group name="schedule" [direction]="'column'" [(ngModel)]="formData.radioValue">
              <d-radio *ngFor="let option of radioOptions" [name]="'schedule'" [value]="option.id">
                {{ option.label }}
              </d-radio>
            </d-radio-group>
          </d-form-control>
        </d-form-item>
      </div>
      <div class="u-1-3">
        <d-form-item>
          <d-form-label>Switch</d-form-label>
          <d-form-control class="form-control-width">
            <d-toggle name="anonymous" [(ngModel)]="formData.toggleValue"></d-toggle>
          </d-form-control>
        </d-form-item>
      </div>
    </div>
    <d-form-operation>
      <d-button bsStyle="primary" class="mr-element-spacing" circled="true" style="margin-right: 4px !important">Submit</d-button>
      <d-button bsStyle="common" circled="true">Cancel</d-button>
    </d-form-operation>
  </form>
</section>
